<template>
  <el-dialog
    class="deep"
    :title="'抽查'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div v-if="!random" class="custom-tree-container">
      <div class="block">
        <el-tree
          :props="props"
          :load="loadNode"
          lazy
          :expand-on-click-node="false"
          node-key="id"
          ref="tree"
          show-checkbox>
         <span class="custom-tree-node" slot-scope="{ node, data }">
           <span>{{ node.label }}</span>
              <span class="my">
                <span>
                <el-button size="mini" type="primary"  v-if="!node.isLeaf" round>{{node.data.availableNumber}}</el-button>
              </span>
              <span>
                <el-input size="mini" v-if="(node.checked || node.indeterminate) && !node.isLeaf" v-model="node.data.extraNumber" placeholder="抽取数"></el-input>
               </span>
           </span>

         </span>


        </el-tree>

      </div>


    </div>
    <div v-if="random" class="random">
      <el-input placeholder="请输入抽查人数"  v-model="extraNumber">
        <template slot="prepend">住院总人数:{{totalNumber}}</template>
      </el-input>
    </div>
    <div style="text-align:right;margin-top: 8px">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="danger" @click="changeType()">切换</el-button>
      <el-button type="primary" @click="dataFormSubmit()">抽取</el-button>
    </div>

  </el-dialog>


</template>
<style>
  .deep .random .el-input__inner{
    width: 300px!important;
    height: 50px!important;
  }

  .deep .random .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>


<!--  scoped-->
<style>
  /*/deep/ */
  .deep .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*justify-content: flex-end;*/
    font-size: 14px;
    padding-right: 8px;
    /*padding-bottom: 4px;*/
  }

  .my {
    justify-content: flex-end;
  }

  /*.el-tree-node{*/
  /*  padding-bottom: 6px;*/
  /*}*/
  /*/deep/ */
  .deep .el-input__inner {
    height: 24px !important;
    width: 100px;
  }

  .deep  .el-button--mini.is-round {
    padding: 4px 12px;
  }

</style>

<script>
    export default {
        data() {
            return {
                totalNumber: 0,
                extraNumber: '',
                visible: false,
                random: false,
                input: '',
                props: {
                    label: 'name',
                    children: 'zones',
                    isLeaf: 'leaf'
                },
                // tableData: [{
                //     date: '2016-05-02',
                //     name: '王小虎',
                //     address: '上海市普陀区金沙江路 1518 弄'
                // }]
            };
        },
        methods: {
            init(id) {
                this.visible = true
            },
            changeType() {
                this.random = !this.random
            },
            loadNode(node, resolve) {

                console.log(node)
                this.$http({
                    url: this.$http.adornUrl(`/bs/patient/getTreeData`),
                    method: 'get',
                    params: {
                        "level": node.level,
                        "joinId": node.data == undefined ? '' : node.data.id
                    }
                }).then(({data}) => {
                    console.log(data)

                    if (data && data.code === 0) {
                        if (node.level == 0) {
                            this.totalNumber = 0
                            data.data.forEach(item => {
                                console.log(item)
                                this.totalNumber += item.availableNumber
                            })
                        }

                        return resolve(data.data)
                    } else {
                        return resolve([])
                    }
                })
            },
            dataFormSubmit() {
               if(this.random){
                   //randomExtra
                   if(this.extraNumber&&this.extraNumber >0){
                       this.$http({
                           url: this.$http.adornUrl(`/bs/patient/randomExtra`),
                           method: 'get',
                           params: {
                               extraNumber:this.extraNumber
                           }
                       }).then(({data}) => {
                           if (data && data.code === 0) {
                               this.$message({
                                   message: '操作成功',
                                   type: 'success',
                                   duration: 100,
                                   onClose: () => {
                                       this.visible = false
                                       this.$emit('refreshDataList')
                                   }
                               })

                           } else {
                               this.$message.error(data.msg)
                           }
                       })
                   }else {
                       this.$message.error("请输入抽取人数")
                   }

               }else {
                   console.log(this.$refs.tree.store.nodesMap)
                   console.log(this.$refs.tree.store.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()))
                   let arr = []
                   this.$refs.tree.store.getCheckedNodes().concat(this.$refs.tree.store.getHalfCheckedNodes()).forEach((item) => {
                       if (item.extraNumber && item.extraNumber > 0) {
                           var object = new Object();
                           object.joinId = item.id;
                           object.num = item.extraNumber;
                           arr.push(object)
                       }
                   })
                   if (arr.length > 0) {
                       this.$http({
                           url: this.$http.adornUrl(`/bs/patient/extra`),
                           method: 'post',
                           data: this.$http.adornData(arr, false)
                       }).then(({data}) => {
                           if (data && data.code === 0) {
                               this.$message({
                                   message: '操作成功',
                                   type: 'success',
                                   duration: 1500,
                                   onClose: () => {
                                       this.visible = false
                                       this.$emit('refreshDataList')
                                   }
                               })
                           } else {
                               this.$message.error(data.msg)
                           }
                       })
                   } else {
                       this.$message.error("请选择抽取单位并输入抽取数量")
                   }
               }


            },
            aaa() {
                console.log("lalal")
            }
        }
    };
</script>

